<template>
  <component :is="useDrawer ? 'el-drawer' : 'el-dialog'"
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    :size="useDrawer ? '600px' : undefined"
    :width="useDrawer ? undefined : '600px'"
    @close="resetForm"
    destroy-on-close>

    <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
      <el-form-item label="标题" prop="collTitle">
        <el-input v-model="formData.collTitle"></el-input>
      </el-form-item>

      <el-form-item label="信息录入开始" prop="infoInputStart">
        <el-date-picker
          v-model="formData.infoInputStart"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="信息录入结束" prop="infoInputEnd">
        <el-date-picker
          v-model="formData.infoInputEnd"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="考试开始时间" prop="examStart">
        <el-date-picker
          v-model="formData.examStart"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"          
          placeholder="选择考试时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="考试结束时间" prop="examEnd">
        <el-date-picker
          v-model="formData.examEnd"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择考试时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="考试时长(分钟)" prop="examMinutes">
        <el-input-number v-model="formData.examMinutes" :min="1" />
      </el-form-item>

      <el-form-item label="学校列表" prop="schoolList">
        <school-select width-fixed v-model="formData.schoolList" class="w-full"/>
      </el-form-item>

      <el-form-item label="年级列表" prop="gradeList">
        <el-input
          type="textarea"
          v-model="formData.gradeList"
          placeholder="请输入年级列表，多个年级用逗号分隔">
        </el-input>
      </el-form-item>


      <el-form-item label="题目随机顺序" prop="randomOrder">
        <el-switch v-model="formData.randomOrder" />
      </el-form-item>

      <el-form-item label="随机开始" prop="randomStartNum">
        <el-input-number v-model="formData.randomStartNum" :min="1" />
        <div class="text-sm text-gray-500">需随机排序的开始题目编号，从1开始</div>
      </el-form-item>

      <el-form-item label="随机结束" prop="randomEndNum">
        <el-input-number v-model="formData.randomEndNum" :min="1" />
      </el-form-item> 
      
      <el-form-item label="启用状态" prop="enabled">
        <el-switch v-model="formData.enabled" />
      </el-form-item>
    </el-form>

    <div :slot="useDrawer ? 'default' : 'footer'" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
    </div>
  </component>
</template>

<script>
import api from '@/common/api';

import Editor from '@/components/admin/Editor';
import SchoolSelect from "@/components/admin/SchoolSelect.vue";

export default {
  name: 'EditSampleDialog',
  props: {
    useDrawer: {
      type: Boolean,
      default: false
    }
  },

  components: {
    SchoolSelect,
    Editor
  },

  data() {
    return {
      loading: false,
      dialogVisible: false,
      formData: {
        id: '',
        collTitle: '',
        infoInputStart: null,
        infoInputEnd: null,
        examStart: null,
        examEnd: null,
        examMinutes: 60,
        schoolList: '',
        gradeList: '',
        enabled: true,
        randomOrder: false,
        randomStartNum: null,
        randomEndNum: null
      },
      rules: {
        collTitle: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        infoInputStart: [
          { required: true, message: '请选择信息录入开始时间', trigger: 'change' }
        ],
        infoInputEnd: [
          { required: true, message: '请选择信息录入结束时间', trigger: 'change' }
        ],
        examStart: [
          { required: true, message: '请选择考试开始时间', trigger: 'change' }
        ],
        examMinutes: [
          { required: true, message: '请输入考试时长', trigger: 'blur' }
        ],
        schoolList: [
          { required: true, message: '请输入学校列表', trigger: 'blur' }
        ],
        gradeList: [
          { required: true, message: '请输入年级列表', trigger: 'blur' }
        ],
        randomStartNum: [
          { 
            validator: (rule, value, callback) => {
              if (this.formData.randomOrder && (value === null || value === undefined || value === '')) {
                callback(new Error('随机顺序开启时，必须填写随机开始编号'));
              } else {
                callback();
              }
            }, 
            trigger: 'blur'
          }
        ],
        randomEndNum: [
          { 
            validator: (rule, value, callback) => {
              if (this.formData.randomOrder && (value === null || value === undefined || value === '')) {
                callback(new Error('随机顺序开启时，必须填写随机结束编号'));
              } else {
                callback();
              }
            }, 
            trigger: 'blur'
          }
        ]
      }
    }
  },

  computed: {
    dialogTitle() {
      return this.formData.id ? '编辑样例' : '添加样例'
    }
  },

  methods: {
    async open(data) {
      this.formData = Object.assign({}, this.formData, data)
      this.dialogVisible = true
    },

    resetForm() {
      this.$refs.formRef?.resetFields()
      this.formData = {
        id: '',
        collTitle: '',
        infoInputStart: null,
        infoInputEnd: null,
        examStart: null,
        examEnd: null,
        examMinutes: 60,
        schoolList: '',
        gradeList: '',
        enabled: true,
        randomOrder: false,
        randomStartNum: null,
        randomEndNum: null
      }
    },

    submitForm() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return

        try {
          this.loading = true
          const { data } = await api.admin_saveItechColl(this.formData)
          this.$message.success('保存成功')
          this.dialogVisible = false

          this.$emit('success', data.data)
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  padding: 20px;
  text-align: right;
}
</style>